<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .container {
            /*百分比：找父标签高度来参考*/
            height: 100%;
            background-image: url("../images/login/bg.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        form {
            text-align: center;
            /*margin: auto;*/
            /*width: 300px;*/
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        input {
            border: none;
            background-color: transparent;
            outline: none;
            border-bottom: 1px solid black;
            padding: 5px;
        }

        input:focus {
            border-bottom: 1px solid pink;
        }

        input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #fff;
        }
        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #fff;
        }
        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #fff;
        }
        input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #fff;
        }

        .btn {
            width: 120px;
            height: 40px;
            background-color: transparent;
            outline: none;
            border: none;
            background-repeat: no-repeat;
            /*
                background-size: cover;
                    cover：同比拉伸，达到铺满效果
                    contain：不会拉伸，保存图片完事的显示在标签内
            */
            background-size: 100% 100%;
        }

        .btn-login {
            background-image: url("../images/login/btn_login_n.png");
        }

        .btn-login:hover {
            background-image: url("../images/login/btn_login_p.png");
        }

        .btn-logout {
            background-image: url("../images/login/btn_logout_n.png");
        }

        .btn-logout:hover {
            background-image: url("../images/login/btn_logout_p.png");
        }

        .btns {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!--单根节点-->
    <div class="container">
        <form>
            <div>
                <input type="text" placeholder="账号">
            </div>
            <div>
                <input type="password" placeholder="密码">
            </div>
            <div class="btns">
                <button type="button" class="btn btn-login"></button>
                <button type="button" class="btn btn-logout"></button>
            </div>
        </form>
    </div>
</body>
</html>